<template>
<el-container>
<!-- {backgroundImage:test+'no-repeat top center 100%/100%'} -->
  <el-main :style="test!=null?{backgroundImage:'url('+require('../assets/'+test) +')'}:{'background':form.colormainbj}">
      <el-drawer
        title="属性设置"
        :visible.sync="drawer"
        :before-close="handleClose"
        :append-to-body="false"
        :modal-append-to-body="false"
        :modal="false"
        size="20%"
        class="drawer">
        <h5>背景设置</h5>
          <div class="drawer-back">
            <ul>
              <li style="border:1px solid rgb(233, 227, 227);width:70%"><el-radio v-model="radio" @click.native.prevent="clickitem(img1)" :label="img1">背景1</el-radio><img :src="require('../assets/'+img1)" alt="背景1"  style="width:60%;margin-top:2px;margin-bottom:3px;"></li>
              <li style="border:1px solid rgb(233, 227, 227);width:70%"><el-radio v-model="radio" @click.native.prevent="clickitem(img2)" :label="img2">背景2</el-radio><img :src="require('../assets/'+img2)" alt="背景2"  style="width:60%;margin-top:2px;margin-bottom:3px;"></li>
              <li style="border:1px solid rgb(233, 227, 227);width:70%"><img src="../assets/add1.png" style=" width: 60%;margin-top:2px;" @click="dialogFormbjVisible = true" ></li>
            </ul>
          </div>
          <h5>主题设置</h5>
          <div class="drawer-them" style=" ">
            <el-form ref="form" :model="form" label-width="80px">
              <el-form-item >
                <span>纯色背景</span>
                <el-row>
                  <el-col :span="18">
                    <el-input v-model="form.colormainbj" placeholder="请选择颜色" size="small " :readonly="true"></el-input>
                  </el-col>
                   <el-col :span="6">
                    <el-color-picker v-model="form.colormainbj" @change="BJclick" show-alpha ></el-color-picker>
                   </el-col>
                </el-row>
              </el-form-item>
              <el-form-item >
                <span>底部栏背景</span>
                <el-row>
                  <el-col :span="18">
                    <el-input v-model="form.colorConfirm" placeholder="请选择颜色" size="small " :readonly="true"></el-input>
                  </el-col>
                   <el-col :span="6">
                    <el-color-picker v-model="form.colorConfirm" @change="Footerclick" show-alpha  ></el-color-picker>
                   </el-col>
                </el-row>
              </el-form-item>
            <el-form-item >
              <span>右上角方块</span>
                <el-row>
                  <el-col :span="18">
                    <el-input v-model="form.background" placeholder="请选择颜色" size="small " :readonly="true"></el-input>
                  </el-col>
                   <el-col :span="6">
                    <el-color-picker v-model="form.background" @change="Rsclick" show-alpha ></el-color-picker>
                   </el-col>
                </el-row>
              </el-form-item>
            </el-form>
          </div>
          <el-button type="primary" round size="mini">还原默认</el-button>
      </el-drawer>
  <div class="home">
    <el-row :gutter="16">
      <el-col :xs="24" :sm="12" :md="18" :lg="18" :xl="18">
        <el-row >
            <el-col :xs="24" :sm="12" :md="2" :lg="2" :xl="2" class="home-col" >
            <el-card :body-style="{ padding: '0px' }" class="home-card" shadow="hover" >
              <i class="el-icon-circle-check home-i" @click="homeMore()"></i>
                <div class="home-d" :class="homeDr">
                  <p><i class="el-icon-edit-outline" style="color:green"></i>修改</p>
                  <p><i class="el-icon-delete" style="color:red"></i>删除</p>
                  <p @click="homeMore()"><i class="el-icon-close" style="color:red" ></i>取消</p>
                </div>
              <img src="../assets/system.png" class="image" @dblclick="dialogVisible=true">
              <div style="padding: 5px;">
                <span>设置</span>
              </div>
            </el-card>
          </el-col>
          <el-col :xs="24" :sm="12" :md="2" :lg="2" :xl="2" class="home-col" >
            <el-card :body-style="{ padding: '0px' }" class="home-card" shadow="hover" >
                <img src="../assets/add1.png" style=" width: 88%;margin-top:2px;" @dblclick="dialogFormVisible = true" >
            </el-card>
          </el-col>
        </el-row>
      </el-col>
      <el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
        <div class="home-rigiht" :style="{'background':form.background}">
          <h3>基本信息</h3>
          <UserAvatar></UserAvatar>
          <hr style="width:80% " />
          <ul>
            <li>昵称：平凡的一天</li>
            <li>性别：男</li>
            <li>角色：管理员</li>
            <li>登录时间：2021-6-29-13:56:12</li>
            <li><a class="home-rigiht-la1"><i class="el-icon-edit-outline"></i>修改信息</a></li>
            <li><a class="home-rigiht-la2"><i class="el-icon-switch-button"></i>退出登录</a></li>
          </ul>
        </div>
      </el-col>
    </el-row>
    
    <el-dialog v-el-drag-dialog width="50%" 
        title="测试内容"
        :append-to-body="true"
        :visible.sync="dialogFormVisible"
        :close-on-click-modal="false"
        :modal="false"
  >
  	<el-table :data="gridData">
      <el-table-column property="date" label="日期" width="150"></el-table-column>
      <el-table-column property="name" label="姓名" width="200"></el-table-column>
      <el-table-column property="address" label="地址"></el-table-column>
    </el-table>
    </el-dialog>
    <el-dialog v-el-drag-dialog width="30%" 
        title="提示"
        :append-to-body="true"
        :visible.sync="dialogVisible"
        :close-on-click-modal="false"
        :modal="false"
        @click.native="dialogClick"
        @blur.native="dialogHide"
  >
  	<span>这是一段信息</span>
        <span slot="footer" class="dialog-footer" >
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        </span>
    </el-dialog>
    </div>
    <el-dialog v-el-drag-dialog width="50%" 
            title="上传背景"
            :visible.sync="dialogFormbjVisible"
            :close-on-click-modal="false"
            :modal="false"
            @close='closeDialog'
            >
            <Upload ref="uploat"></Upload>
          </el-dialog>
  </el-main>
  <el-footer :style="{'background':form.colorConfirm}">
    <div class="footer-r" @click="drawer=true" >
       <el-tooltip class="item" effect="dark" content="主题设置" placement="top-start">
      <img src="../assets/zt.png" alt="" width="30px" >
    </el-tooltip>
    </div>
  </el-footer>
  
</el-container>

</template>

<script>
import UserAvatar from '../components/VueCropper/userAvatar.vue'
import Upload from '../components/upload/upload.vue'
import {cookiesSet,cookiesGet,cookiesRemove,cookiesIsKey} from '../utils/zl-cookies'
export default {
  components:{
    UserAvatar,
    Upload,
  },
  name: 'Home',
  data () {
    return {
      drawer: false,
      dialogVisible:false,
      dialogFormVisible:false,
      dialogFormbjVisible:false,
      radio:cookiesIsKey('bj_img')?cookiesGet('bj_img'):'',
      test:null,
      homeDr:null,
      zIndex:0,
      img1:'background/bj03.jpeg',
      img2:'background/bj02.jpeg',
      form:{
          background:'rgba(255, 255, 255, 0.5)',
          colorConfirm:'rgba(255, 255, 255, 0.8)',
          colormainbj:cookiesGet('bj_back')
      },
      gridData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }],
    }
  },
  created(){
    this.form.colormainbj=cookiesGet('bj_back')?cookiesGet('bj_back'):'rgba(177, 237, 204, 1)'
    this.form.colorConfirm=cookiesGet('ft_back')?cookiesGet('ft_back'):'rgba(255, 255, 255, 0.6)'
    this.form.background=cookiesGet("rs_back")?cookiesGet("rs_back"):'rgba(255, 255, 255, 0.5)'
    this.test=cookiesGet("bj_img")
  },
   methods: {
      /**更改radio值得方法 */
     BJclick(val){
      cookiesRemove('bj_img')
      cookiesSet("bj_back",val)
      this.colormainbj=val
      this.test=this.radio=null
     },
     /**底部颜色修改值存入cookies */
     Footerclick(val){
         cookiesSet("ft_back",val)
         this.colorConfirm=val
     },
     /**右上角基本信息背景改变值存入cookies */
     Rsclick(val){
        cookiesSet("rs_back",val)
        this.background=val
     },
     /**动态修改背景图片的方法 */
     clickitem(e){
        //e === this.radio ? this.radio = '' : this.radio = e
        this.radio=e
        console.log(e,'图片')
         if(this.radio!=null || this.radio!=''){
            //this.test=this.radio.substring(this.radio.lastIndexOf('/')+1,this.radio.length)
            this.colormainbj=null
            cookiesRemove("bj_back")
            cookiesSet("bj_img",this.radio)
            this.test=cookiesGet("bj_img")
          }
        
     },
     dialogClick(e){
      
       console.log('单击触发', document.getElementsByClassName("el-dialog"))
       this.zIndex=1
     },
     dialogHide(){
       console.log('移除触发')
      this.$refs.aside.style.zIndex = "0"
     },
     homeMore(){
       this.homeDr==null?this.homeDr='home-dr':this.homeDr=null
     },
     /**Drawer 抽屉关闭按钮 */
      handleClose(done) {
        done();
      },
      //关闭弹框的事件
    closeDialog(){
      this.$nextTick(()=>{
          this.$refs.uploat.reclick()
      });//清空数据
    },
    }
}
</script>
<style lang="less" scoped>
.home-card:hover{
  .home-i{
    display: block;
  }
  // .home-d{
  //   display: block; 
  // }
}
</style>
<style>
.el-dialog__wrapper{
  position: initial !important;
}
.el-dialog{
  position: fixed !important;
}
</style>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.drawer-back{
  border: 1px solid rgb(233, 227, 227);
  overflow-y:auto;
  width: 99%;
  height: 50%;
}
.drawer h5{
  text-align: left;
  margin-left: 5px;
}
.drawer-back ul{
  list-style-type: none;
  margin-bottom: 10px;
  margin-left: 10%;
}
.drawer-back ul li{
  margin-bottom: 10px;
}
.drawer-them{
  text-align: left;
  overflow-y:auto;
  width: 100%;
  height: 30%;
}
.home{
  width: 100%;
}
.home-col{
  margin: 10px;
  cursor: pointer;
}
.home-card{
  background-color: rgba(255, 255, 255, 0);
  border: 1px rgb(225, 228, 230)  solid;
}
.home-card:hover{
  background-color: rgba(213, 235, 253, 0.4);

}
.home-card span{
  color: #fff;
}

.home-d{
  display: none;
  list-style-type: none;
  position: absolute;
  left: 4%;
  box-shadow: 3px 3px 3px #888888;
  padding:0 10px;
  font-size: 6px;
  background-color: rgba(255, 255, 253, 0.8);
  color: #000;
}
.home-dr{
  display: block;
}
.home-card ul li{
  margin-right: 10px;
}
.home-i{
  display: none;
  position: absolute;
  left: 0;
  margin-left: 15px;
  background-color: seashell;
  border: 1px seashell solid;
}
.image {
  width: 56%;
  margin:auto;
  margin-top: 5px;
  display: block;
}
.el-footer {
  background-color: #fff;
  color: #333;
  text-align: center;
  line-height: 43px;
  display: block;
  width: 100%;
  border-top: silver 1px solid;
  height: 43px !important;
  position: absolute;
  bottom:0;
}
.el-main {
  color: #333;
  text-align: center;
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
}
.home-rigiht{
  width: 100%;
  height: 300px;
  border-radius: 10px;
}
.home-rigiht h3{
  text-align: center;
  color: rgba(103, 171, 248, 0.74);
}
.home-rigiht ul{
  list-style-type: none;
  text-align: left;
}
.home-rigiht ul li{
  float: left;
  margin-left: 30px;
  margin-bottom:10px;
}
.home-rigiht-la1{
  color: green;
  cursor: pointer;
}
.home-rigiht-la2{
  color: red;
  cursor: pointer;
}
.home-rigiht-la1:hover{
  text-decoration:underline;
}
.home-rigiht-la2:hover{
  text-decoration:underline;
}
body > .el-container {
  margin-bottom: 40px;
}

/* .el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
} */

.footer-r{
  width: 40px;
  height:40px;
  cursor: pointer;
  border-radius:50%;
  border: darkturquoise 1px solid;
}
.footer-r img{
  margin-top:5px;
}
.footer-r img:hover{
  width: 35px;background-image: url();
  margin-top: 2px;
}
</style>
